<template>
	<view class="bgf9" style="height: 100%;">
		<!-- 头部 -->
		<view class="w375">
			<view class="w60">
				<view>
					<!-- 本月订单 -->
					<view class="fs15">126</view>
					<view class="fs12"> 本月订单(单) </view>
				</view>
				<view>
					<!-- 总订单量 -->
					<view class="fs15">385</view>
					<view class="fs12"> 总订单量(单) </view>
				</view>
			</view>
		</view>
		<!-- 本月 -->
		<view class="h45 fs12">
			<text style="font-weight: 700;margin-left: 54rpx;">本月</text>
			<text class="sjx"></text>
		</view>
		<!-- 订单 -->
		<view class="w345" v-for="item in 5" style="margin-top: 30rpx;">
			<view style="width: 90%;margin:  auto;">
				<view style="height: 98rpx;line-height: 98rpx;border-bottom: 1rpx solid #F5F5F5;position: relative;top: 0;display: flex;">
					<text class="fs14">订单编号：12346798</text>
					<view style="position: absolute;right: 0;">
						<text class="bolt"></text>
						<text class="fs14" style="color: #FFA32C;">加急</text>
					</view>
				</view>
				<!--  -->
				<view style="display: flex; padding: 30rpx 0;border-bottom: 1rpx solid #F5F5F5;">
					<image class="imgsizi" src="../../../static/chi.png"></image>
					<view style="margin-left: 30rpx;width: 70%;position: relative;color: rgba(184,184,184,1);">
						<view class="fs13" style="position: relative;">
							<text style="color: rgba(51,51,51,1);font-weight: 700;">商品名称商品名称</text>
							<text style="position: absolute;right: 0;color: #333;">￥299.88</text>
						</view>
						<view class="fs13" style="position: relative;color: #666;padding: 10rpx 0;">
							<text style="color: rgba(51,51,51,1);">规格：500g</text>
							<text style="position: absolute;right: 0;">x2</text>
						</view>
						<view class="fs13" style="position: relative;">
							<text style="color: #666;font-weight: 700;">配送费</text>
							<text style="position: absolute;right: 0;color: #333333;">￥2.00</text>
						</view>
					</view>
				</view>
				<!--  -->
				<view style="height: 100rpx;line-height: 110rpx;text-align: right;color: #BCBCBC;">
					送达时间：今天12：26
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style>
	.w375 {
		height: 160rpx;
		background: #24BC81;
	}

	.w60 {
		width: 60%;
		height: 160rpx;
		margin: auto;
		display: flex;
	}

	.w60>view {
		width: 50%;
		color: #FFFFFF;
		text-align: center;
		line-height: 60rpx;
	}

	.h45 {
		height: 60rpx;
		line-height: 90rpx;
	}

	.sjx {
		display: inline-block;
		margin-left: 20rpx;
		margin-bottom: 5rpx;
		border-left: 10rpx solid transparent;
		border-right: 10rpx solid transparent;
		border-top: 10rpx solid #000;
	}

	.w345 {
		width: 690rpx;
		height: 398rpx;
		margin: auto;
		background: #FFFFFF;
	}

	.bolt{
		position:absolute;
		top: 48rpx;
		left: -20rpx;
	}
	.bolt::before{
		content:"";
		position:absolute;
		margin-top:-12rpx;
		margin-left:-6rpx;
		border-top:10rpx solid transparent;
		border-right:5rpx solid #FFA32C;
		border-bottom:10rpx solid #FFA32C;
		border-left:5rpx solid transparent;
	}
	.bolt::after{
		content:"";
		position:absolute;
		/* margin-left:-0rpx; */
		border-top:10rpx solid #FFA32C;
		border-right:5rpx solid transparent;
		border-bottom:10rpx solid transparent;
		border-left:5rpx solid #FFA32C;
	}
	.imgsizi{
		width: 130rpx;
		height: 130rpx;
	}

</style>
